<template>
  <div class="beauty">
  <header1/>
  <header2/>
  <header3/>
  <header4/>
  <store/>
  <makeupbottom/>
  </div>
</template>

<script>
import header1 from './components/header1.vue'
import header2 from './components/header2.vue'
import header3 from './components/header3.vue'
import header4 from './components/header4.vue'
import store from './components/store.vue'
import makeupbottom from './components/makeupbottom.vue'

export default {
  name:'beauty',
  components:{
    header1,
    header2,
    header3,
    header4,
    store,
    makeupbottom
  },
 data: function(){
    return{
      iconList: [],
      recommendList: []
    }
  },
  mounted(){
    this.getHomeApiInfo()
  },
  methods: {
    getHomeApiInfo(){
      axios.get("/mock/beauty.json").then(this.getHomeResponseInfo)
    },
    getHomeResponseInfo(response){
      //  console.log(response.data);
      let res = response.data  //就是home.json里面的内容
      if(res.success && res.dataList){
        const data = res.dataList //取json中的datalist属性
        // console.log(data.iconLists.length)
        this.iconList = data.iconLists
        this.recommendList = data.recommendLists
      }
    }
  }

   
}

</script>
